<template>
  <div class="banner" id="banner3">
    <div class="banner-bgdarkener">
      <ElRow>
        <ElCol :xs="1" :sm="2" :md="3" :lg="3" :xl="3"></ElCol>
        <ElCol :xs="22" :sm="20" :md="16" :lg="14" :xl="14">
          <div style="height: 200px" />
          <h2 class="banner-heading">
            Promotion and Education: Taking "Higher-performance and Lower-cost"
            as the Core Value for Promoting UN SDGs
          </h2>
          <p class="banner-text">
            LID-CBALT encourages people to make full use of limited resources in
            a sustainable and efficient manner, which not only contribute to
            increasing the quantity of LID practices and improving the quality
            of LID facility layout plan, but also promote the concept of
            "higher-performance and lower-cost".
          </p>
        </ElCol>
      </ElRow>
    </div>
  </div>
  <div class="subtitle">
    <el-row>
      <el-col :span="1"></el-col>
      <el-col :xs="20" :span="14">
        <p style="margin-bottom: 10px">
          CASE STUDY:<br />A case study in Changban, Tianhe District, Guangzhou
        </p>
        <div class="line"></div>
      </el-col>
    </el-row>
  </div>
  <el-row>
    <el-col :xs="1" :sm="1" :md="1" :lg="3" :xl="5" />
    <el-col :xs="22" :sm="22" :md="22" :lg="18" :xl="14">
      <el-row>
        <el-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14" id="scatter">
          scatter loading...
        </el-col>
        <el-col :xs="0" :sm="0" :md="1" :lg="1" :xl="1" />
        <el-col :xs="24" :sm="24" :md="9" :lg="9" :xl="9" id="rightrow">
          <el-row>
            <el-col
              :xs="24"
              :sm="11"
              :md="24"
              :lg="24"
              :xl="24"
              style="height: 255px"
              id="img1wrapper"
            >
              <div class="imagebox">
                <div class="imagewrap">
                  <img v-bind:src="currentFlat" id="flatjpg" alt="flatjpg" />
                </div>
              </div>
            </el-col>
            <el-col :xs="24" :sm="2" :md="24" :lg="24" :xl="24">
              <div style="height: 10px"></div>
            </el-col>
            <el-col
              :xs="24"
              :sm="11"
              :md="24"
              :lg="24"
              :xl="24"
              style="height: 255px"
              id="img2wrapper"
            >
              <div class="imagebox">
                <div class="imagewrap">
                  <img v-bind:src="currentCurve" id="curvejpg" alt="curvejpg" />
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <div id="tips">
        TIPS: Move the mouse and click to see the corresponding Layout and
        Runoff chart.
      </div>
    </el-col>
    <el-col :xs="1" :sm="1" :md="1" :lg="3" :xl="5" />
  </el-row>
  <div class="subtitle">
    <el-row>
      <el-col :span="1"></el-col>
      <el-col :xs="20" :span="14">
        <p style="margin-bottom: 10px">
          EXAMPLE:<br />Design drawing of Changban, Tianhe District, Guangzhou
        </p>
        <div class="line"></div>
      </el-col>
    </el-row>
  </div>
  <div>
    <el-carousel
      :interval="5000"
      indicator-position="outside"
      arrow="always"
      style="z-index: 0"
      :height="carouselHeight + 'px'"
      @change="handleChange"
    >
      <el-carousel-item v-for="item in exampleList" :key="item.index">
        <img class="carousel-img" :src="item.img" :alt="item.title" />
      </el-carousel-item>
    </el-carousel>
    <div id="carousel-text-wrapper">
      <el-row class="carousel-text">
        <el-col :span="12" :offset="2">
          <h1>{{ currentExample.title }}</h1>
          <p>
            {{ currentExample.text }}
          </p>
        </el-col>
        <el-col :span="8" :offset="2" style="text-align: center">
          <h1>{{ currentExample.index }} of 6</h1>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts/core";
// 引入柱图表，图表后缀都为 Chart
import { ScatterChart } from "echarts/charts";
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import { TitleComponent, GridComponent } from "echarts/components";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";
// 注册必须的组件
echarts.use([TitleComponent, GridComponent, ScatterChart, CanvasRenderer]);
import axios from "axios";
import { csvParseRows } from "d3-dsv";

export default {
  name: "Example",
  data() {
    return {
      currentFlat: "/data/flat100/1.jpg",
      currentCurve: "/data/curve100/1.jpg",
      currentExample: {
        index: 1,
        img: "http://lid-cbalt.com/data/images/cs-1.jpg",
        title: "Site Analysis of Changban Industrial Campus in Guangzhou",
        text: "The research took the Changban Industrial Campus as study aera. This image analyzed the location and current conditions of site, the average annual rainfall and temperature in Guangzhou,the current hydrological effects under different return periods, and the existing infrastructure.",
      },
      carouselHeight: "500",
      exampleList: [
        {
          index: 1,
          img: "http://lid-cbalt.com/data/images/cs-1.jpg",
          title: "Site Analysis of Changban Industrial Campus in Guangzhou",
          text: "The research took the Changban Industrial Campus as study aera. This image analyzed the location and current conditions of site, the average annual rainfall and temperature in Guangzhou,the current hydrological effects under different return periods, and the existing infrastructure.",
        },
        {
          index: 2,
          img: "http://lid-cbalt.com/data/images/cs-2.jpg",
          title:
            "The Construction of the Initial Hydrological Model of Changban Industrial Campus",
          text: "The initial hydrological model of Changban Industrial Campus was established to lay the foundation for subsequent calculation.",
        },
        {
          index: 3,
          img: "http://lid-cbalt.com/data/images/cs-3.jpg",
          title:
            "LID Layout and Cost-benefit Study of Changban Industrial Campus",
          text: "Constructing the FTC matrix of Changban Industrial Campus and verify its effectiveness. The cost-benefit curves and the LID layout with optimal benefits under six rainfall return periods were obtained by the multi-objective optimization algorithm (GDE3).",
        },
        {
          index: 4,
          img: "http://lid-cbalt.com/data/images/cs-4.jpg",
          title: "Detail Drawing and Cost of Eight Types of LID Facilities",
          text: "Calculating the construction costs (including material and labor costs) and maintenance costs for the eight types of LID facilities over their full life cycle to obtain eight annual maintenance costs, which were brought into the cost calculator.",
        },
        {
          index: 5,
          img: "http://lid-cbalt.com/data/images/cs-5.jpg",
          title: "Site Planning",
          text: "According to the iterative calculation results, combined with consideration of the actual construction cost, the LID layout plan was selected in the optimal spatial layout solution set for the site-scale LID facilities planning.",
        },
        {
          index: 6,
          img: "http://lid-cbalt.com/data/images/cs-6.jpg",
          title: "LID Layout and Performance",
          text: "Eight LID facilities were reasonably arranged in the site according to the results of the optimization algorithm, which performed a good hydrological effect, and its runoff reduction rate has reached 82.57%.",
        },
      ],
    };
  },
  methods: {
    handleChange(newi, oldi) {
      console.log(newi, oldi);
      this.currentExample = this.exampleList[newi];
    },
    adjustImgStyle() {
      if (document.body.clientWidth < 768) {
        document.getElementById("scatter").style.height = "400px";
      } else {
        document.getElementById("scatter").style.height = "520px";
      }
      if (document.body.clientWidth < 768) {
        document.getElementById("rightrow").style.height = "auto";
        return;
      }
      if (document.body.clientWidth >= 992) {
        document.getElementById("rightrow").style.height = "520px";
        return;
      }
      document.getElementById("rightrow").style.height = "260px";
    },
    updateJPG(jpgid) {
      this.currentFlat = "/data/flat100/" + jpgid.toString() + ".jpg";
      this.currentCurve = "/data/curve100/" + jpgid.toString() + ".jpg";
    },
    getCSVData() {
      console.log("start fetch csv");
      return new Promise(function (resolve) {
        axios.get("/data/Cost_RunoffRate.CSV").then((res) => {
          var data = res.data;
          data = csvParseRows(data);
          resolve(data);
        });
      });
    },
    doPlot(that, scatterData) {
      // 基于准备好的dom，初始化图表实例
      var myChart = echarts.init(document.getElementById("scatter"));
      console.log("chart inited");
      // 设置图表
      myChart.setOption({
        title: {
          text: "Cost-Benefit Scatter Plot",
          left: "center",
          top: "3%",
        },
        xAxis: {
          name: "Cost(US$)",
          min: 190000,
          max: 730000,
          nameTextStyle: {
            color: "inherit",
            align: "center",
            verticalAlign: "middle",
          },
          nameLocation: "middle",
          nameGap: 30,
        },
        yAxis: {
          name: "Runoff Rate(%)",
          min: 40,
          nameTextStyle: {
            color: "inherit",
            align: "center",
            verticalAlign: "middle",
          },
          nameLocation: "middle",
          nameGap: 30,
        },
        series: [
          {
            type: "scatter",
            data: scatterData,
            symbol: "circle",
            symbolSize: 8,
            cursor: "crosshair",
            emphasis: {
              scale: true,
              focus: "self",
              blurScope: "coordinateSystem",
              label: {
                show: true,
                position: "top",
                distance: 8,
                color: "inherit",
                fontSize: 15,
                backgroundColor: "white",
                padding: 4,
                borderColor: "inherit",
                borderWidth: 2,
                borderRadius: 3,
                //强调内容回调函数
                formatter: function (params) {
                  var str = "FUN" + (params.dataIndex + 1).toString() + ":$";
                  str +=
                    parseFloat(params.data[0]).toFixed(2).toString() + ", ";
                  str += parseFloat(params.data[1]).toFixed(2).toString() + "%";
                  return str;
                },
              },
            },
          },
        ],
      });
      console.log("chart complete");
      //图表数据点击事件
      myChart.on("click", function (params) {
        var jpgindex = params.dataIndex + 1;
        //console.log(jpgindex);
        var curveobj = document.getElementById("curvejpg");
        var flatobj = document.getElementById("flatjpg");
        curveobj.src = "/data/curve100/" + jpgindex.toString() + ".jpg";
        flatobj.src = "/data/flat100/" + jpgindex.toString() + ".jpg";
      });
      setTimeout(function () {
        window.onresize = function () {
          if (document.getElementById("currCompP").innerHTML == "casestudy") {
            myChart.resize();
            that.adjustImgStyle();
            console.log("adjust fig height");
            console.log(document.body.clientWidth);
            that.carouselHeight =
              document.body.clientWidth * 0.917 * 0.4876 + 15;
          }
        };
      }, 150);
    },
  },
  mounted() {
    //初始化
    this.getCSVData().then((d) => {
      this.doPlot(this, d);
    });
    this.carouselHeight = document.body.clientWidth * 0.917 * 0.4876 + 15;
    var curveobj = document.getElementById("curvejpg");
    var flatobj = document.getElementById("flatjpg");
    curveobj.src = "/data/curve100/1.jpg";
    flatobj.src = "/data/flat100/1.jpg";
    this.adjustImgStyle();
  },
};
</script>

<style scoped>
.banner {
  height: 520px;
  background-image: url("http://lid-cbalt.com/data/images/bg3-home.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  margin-bottom: 10px;
}
.banner-bgdarkener {
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  vertical-align: bottom;
  padding: 0 20px 0 20px;
}
.banner-heading {
  font-family: "Arial Negreta", "Arial Normal", "Arial";
  font-weight: 700;
  font-style: normal;
  font-size: 30px;
  color: #6cdb9f;
  text-align: left;
  margin-top: 0px;
}
.banner-text {
  height: 85px;
  font-family: "Arial Normal", "Arial";
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  color: #ffffff;
  text-align: left;
}
.subtitle {
  text-align: left;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", "微软雅黑";
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  color: #333333;
}
.line {
  width: 100%;
  height: 5px;
  background: inherit;
  background-color: #91b354;
  margin-bottom: 40px;
}
.el-col {
  vertical-align: middle;
}
#scatter {
  height: 520px;
  border-style: solid;
  border-color: #1f884f;
  border-width: 1px;
  border-radius: 10px;
  margin-bottom: 20px;
}
#rightrow {
  height: auto;
}
.imagebox {
  height: 100%;
}
.imagewrap {
  height: 100%;
  border-style: solid;
  border-color: #1f884f;
  border-width: 1px;
  border-radius: 10px;
  box-sizing: border-box;
}
img {
  width: 100%;
  height: auto;
}
#flatjpg {
  height: 100%;
  width: 95%;
}
#curvejpg {
  height: 100%;
  width: 95%;
}
#tips {
  text-align: left;
  font-size: 16px;
  color: #aaaaaa;
  margin-top: 10px;
  margin-bottom: 30px;
}
.carousel-img {
  width: 91.7%;
  border-style: solid;
  border-color: #4a556b;
  border-width: 1px;
  box-sizing: border-box;
  padding: 4px;
}
.carousel-text {
  padding-bottom: 10px;
  color: white;
  background-color: #4ca072;
  text-align: left;
}
#carousel-text-wrapper {
  width: 91.7%;
  height: 380px;
  margin-bottom: 50px;
  margin-left: 4.17%;
}
</style>